<template>
    <view class="content">
        <view class="main-info">
            <view class="main-info-wrap">
                <up-form labelPosition="left" :model="state.model" :rules="state.rules" ref="formRef">
                    <up-form-item label="您的姓名" prop="info.fullName" borderBottom :labelWidth="100" required  ref="item1">
                        <up-input v-model="state.model.info.fullName" disabledColor="#ffffff" border="none"
                            placeholder="请填写您的姓名"></up-input>
                    </up-form-item>
                    <up-form-item label="联系方式" prop="info.phone" borderBottom :labelWidth="100" required>
                        <up-input v-model="state.model.info.phone" disabledColor="#ffffff" border="none" placeholder="请填写您的联系方式"></up-input>
                    </up-form-item>
                    <up-form-item label="地址" prop="info.address" :labelWidth="100" required>
                        <up-textarea v-model="state.model.info.address" placeholder="请填写详细地址"></up-textarea>
                    </up-form-item>
                </up-form>
            </view>
        </view>
        <view class="fixed-action-wrap">
            <view class="fixed-action-wrap-button" @click="save">保存</view>
        </view>
    </view>
</template>
<script setup>
import { ref, reactive,getCurrentInstance, onMounted } from "vue"

const {proxy}=getCurrentInstance()
const formRef = ref(null)
const state = reactive({
    model: {
        info: {
            fullName: "",
            phone: "",
            address:""
        },
    },
    rules: {
        'info.fullName': {
            type: 'string',
            required: true,
            message: '请填写您的姓名',
            trigger: ['blur', 'change'],
        },
        'info.phone': {
            type: 'number',
            min:11,
            max:11,
            required: true,
            message: '请填写您的联系方式',
            trigger: ['blur', 'change', 'click'],
        },
        'info.address': {
            type: 'string',
            required: true,
            message: '请填写详细地址',
            trigger: ['blur', 'change', 'click'],
        }
    }
})

async function getInfo(){
    const res=await proxy.request('/mailing/addre/get',{},{
        method:"GET"
    })
    if(res.data.data&&res.data.data.id){
        state.model.info=res.data.data
    }
}

function save(){
    formRef.value?.validate().then(async (valid) => {
        if (valid) {
          const res=await proxy.request('/mailing/addre/save',state.model.info,{
            method:'POST'
          })
          console.log(res)
          if(res.code==200){
            uni.$u.toast('保存成功')
            setTimeout(()=>{
                formRef.value?.resetFields()
                formRef.value?.clearValidate()
                uni.navigateBack()
            },1350)
          }
        } else {
            uni.$u.toast('校验失败')
        }
    }).catch(() => {
        // 处理验证错误  
        uni.$u.toast('校验失败')
    });
}
onMounted(()=>{
    getInfo()
})
</script>
<style lang="scss">
page {
    // padding: 32rpx;
    background-color: #F5F5F5;
}
</style>
<style lang="scss" scoped>
.main-info {
    // padding: 32rpx;
    // margin-top: 32rpx;

    &-wrap {
        width: 100%;
        padding: 20rpx 48rpx;
        background: #FFFFFF;
        box-sizing: border-box;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
    }

    .area {
        display: flex;
        align-items: center;
        .line {
            width: 8rpx;
            height: 32rpx;
            background: #F2CB51;
            border-radius: 12rpx 12rpx 12rpx 12rpx;
        }

        .text {
            margin-left: 20rpx;
            width: 128rpx;
            height: 44rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 32rpx;
            color: #323232;
            line-height: 38rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }
}

.fixed-action-wrap {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 128rpx;
    padding: 32rpx;
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;

    &-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(100% - 24px);
        height: 80rpx;
        background: #F2CB51;
        border-radius: 58rpx 58rpx 58rpx 58rpx;
    }
}
</style>